<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>在线客服</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1，minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
    <link rel="stylesheet" href="__STATIC__/customer/css/ai_service.cli.v2.css">
    <link rel="stylesheet" href="__STATIC__/common/js/jqueryWeui/weui.min.css">
    <link rel="stylesheet" href="__STATIC__/common/js/jqueryWeui/jquery-weui.min.css">
    <link rel="stylesheet" href="__STATIC__/common/css/iconfont.css">
    <style>
        .chat-message{
            -webkit-touch-callout: all;
            -webkit-user-select: all;
            -moz-user-select: all;
            -ms-user-select: all;
            user-select: all;
        }
        .clearfloat .right .chat-message{
            background: {$style['box_color']};
        }
        .clearfloat .right .chat-message:before {
            border-left: 10px solid {$style['box_color']};;
        }
		.visitorBody{
			background:#ffffff;
			height:100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			background: url(__STATIC__/common/images/index_bg.ecdeed1.png) 0 0 no-repeat;
			background-size: cover;
		}
		.visitorContainer{
			width: 768px;height:600px;
			box-shadow: 0 0.5rem 2.5rem 0 rgba(0, 0, 0, 0.2);
		}
    </style>
</head>
<body {if $type == 2 && $os == 'p'}class="visitorBody"{/if}>
<div class="chat-container {if $type == 2 && $os == 'p'}visitorContainer{/if}" id="app" >
    <div class="layui-row chat-header" style="background: {$style['box_color']}">
        <div class="{if $type == 2 && $os == 'p'}layui-col-xs1{else/}layui-col-xs2{/if} chat-header-avatar">
            {if $type == 2 && $os == 'm'}<i class="layui-icon layui-icon-left chat-back" id="goBack"></i>{/if}
            <img src="__STATIC__/common/images/kefu.png" class="agent-avatar" {if $type == 2 && $os == 'm'}style="left:40px"{/if}/>
        </div>
        <div class="{if $type == 2 && $os == 'p'}layui-col-xs10{else/}layui-col-xs9{/if} chat-header-title" {if $type == 2 && $os == 'm'}style="padding-left:30px"{/if}>
            {if $robot_open eq 1}{$robot_title}{else/}官方客服为您服务{/if}
        </div>
        {if $type == 1}
        <div class="layui-col-xs1 chat-header-tool" id="closeBtn">
            <i class="layui-icon layui-icon-down"></i>
        </div>
        {elseif $type == 2}
        <div class="layui-col-xs1 chat-header-tool" id="operatorVoice">
            <span class="iconfont" style="font-size: 20px" id="openVoice">&#xe69f;</span>
            <span class="iconfont" style="font-size: 20px;display: none" id="closeVoice">&#xe69d;</span>
        </div>
        {/if}
    </div>
    
    <div class="layui-row chat-body" {if $type == 2 && $os == 'p'}style="width:70%"{/if}>
        
        <div class="chat-box">
   
{if isset($hello_word)}
<div class="clearfloat ">
	<div class="author-name">
		<small class="chat-date">2023-04-09 12:23:33</small>
	</div>
	<div class="left">
			<div class="chat-avatars">
				<img src="__STATIC__/common/images/kefu.png">
			</div>
			<div class="chat-message complete-read" data-msg-id="1467"><?php if(isset($hello_word)){echo $hello_word; }?>
			</div>
	</div>
</div>
{/if}


        </div>
        <div style="text-align:center;">
  
</div>

    </div>
    <div class="layui-row chat-footer" {if $type == 2 && $os == 'p'}style="width:70%;border-right:1px solid #eee"{/if}>
        <div class="text-holder">
            <textarea id="textarea" placeholder="请输入内容" onblur="window.scroll(0, 0)"></textarea>
        </div>
        <div class="send-bar">
            <div class="tool-box">
                <i class="layui-icon layui-icon-face-smile" id="face"></i>
                <i class="layui-icon layui-icon-picture" id="image"></i>
                <i class="layui-icon" style="font-size: 20px;" id="file" title="文件">&#xe61d;</i>
                <!--<i class="layui-icon layui-icon-speaker" id="voice" title="语音"></i>-->
                <span class="staff-service">转人工</span>
            </div>
            <div class="send-btn-div">
                <input type="button" value="发送" class="send-input" id="sendBtn">
            </div>
        </div>
    </div>
    {if $type == 2 && $os == 'p'}
    <div class="layui-row" style="height: 510px;width: 230px;float: right;background: #fff;margin-top: 62px;">
        <div class="layui-tab layui-tab-brief" style="height: 490px;overflow-y:auto">
            <ul class="layui-tab-title">
                <li class="layui-this">常见问题</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item info-msg layui-show">
                    {foreach name="question" item="vo"}
                    <p><a href="javascript:;" onclick="autoAnswer(this)" data-id="{$vo['question_id']}" style="font-size: 14px">{$vo['question']}</a></p>
                    {/foreach}
                </div>
            </div>
        </div>
    </div>
    {/if}
</div>

<audio src="__STATIC__/voice/default.wav" style="display: none;" id="ai_service-index-audio"></audio>

<div id="praise_box" style="display: none;text-align: center;padding-top: 19%">
    <p>请您对我本次服务做出评价：</p>
    <div id="praise_star"></div>
</div>

<div class="layui-form" action="" style="display: none;" id="msg-box">
    <div class="layui-form-item" style="margin-top: 10px">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input type="text" name="phone" required  lay-verify="required" autocomplete="off" class="layui-input" style="width: 200px;" id="phone">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" id="sub-btn">提交咨询</button>
        </div>
    </div>
</div>

<script>

    var socketUrl = '{$socket}';
    var seller_id = '{$seller_id}';
    var seller = '{$seller}';
    var t = '{$nowTime}';
    var tk = '{$token}';
    var type = {$type};
    var port = {$port};
    var direct_kefu = '{$direct_kefu}';
    var robot_open = {$robot_open};
    var robot_hello = '{$robot_hello}';
    var robot_title = '{$robot_title}';
    var customerId = '{$customerId}';
    var cusotmerName = '{$customerName}';
    var avatar = '{$avatar}';
    var os = '{$os}';
    var pre_see = {$pre_see};
    var pre_input = {$pre_input};
    var goback_url = '{$referer}';
    var agent = '{$agent}';
</script>
<script src="__STATIC__/common/js/jquery.min.js"></script>
<script src="__STATIC__/common/js/jqueryWeui/jquery-weui.min.js"></script>
<script src="__STATIC__/layui/layui.js"></script>
{if $model == 1}
<script src="__STATIC__/common/js/socket.io.js"></script>
<script src="__STATIC__/common/js/ai_service.io.js"></script>
<script src="__STATIC__/customer/js/ai_service.cli.io.js"></script>
{else /}
<script src="__STATIC__/common/js/reconnecting-websocket.min.js"></script>
<script src="__STATIC__/common/js/ai_service.v2.js"></script>
<script src="__STATIC__/customer/js/ai_service.cli.v2.js"></script>
{/if}
</body>
</html>